<template>
  <!--<div>-->
    <!--<ul id="example-2">-->
      <!--<li v-for="(item, index) in list">-->
        <!--{{ item.startTime }} - {{ index }}-->
      <!--</li>-->
    <!--</ul>-->
  <!--</div>-->
  <el-row :gutter="5">
    <el-col>
      <el-card  shadow="hover" >
        <el-collapse v-model="activeNames">
          <el-collapse-item v-for="(v,k) in list" :title="v.name" :name="k">
            <el-table
              :data="v.programEntities"
              style="width: 100%">
              <el-table-column
                prop="programName"
                label="节目名称">
              </el-table-column>
              <el-table-column
                prop="width"
                label="分辨率">
                <template slot-scope="scope">
                  <span>{{scope.row.width}}/{{scope.row.height}}</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                header-align="center"
                align="center"
                width="80"
                label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="jianbo(v.id,scope.row.id)" size="small">减播</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </el-col>
    <el-col v-if="list.length == 0"  :span="24" >
      <el-card shadow="hover" >
        <div style="text-align: center">
          暂无发布
        </div>
        <!--<div>-->
          <!--<el-button @click="$router.push('/publish-add')"  size="mini" round>去发布</el-button>-->
        <!--</div>-->
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
    export default {
      props: {
        did: {
          type: String
        }
      },
      data () {
        return {
          list: [],
          activeNames: [0]
        }
      },
      name: 'Schedule',
      mounted () {
        this.getInfo()
        // this.$nextTick(function () {
        //   this.$http({
        //     url: this.$http.adornUrl(`/sys/publish/time-range/${this.did}`),
        //     method: 'get',
        //     params: this.$http.adornParams()
        //   }).then(({data}) => {
        //     if (data && data.code === 0) {
        //       this.list = data.list
        //       console.log(this.list)
        //     }
        //   })
        // })

      },
      methods: {
        getInfo(){
          console.log('did',this.did)
          this.$http({
            url: this.$http.adornUrl(`/sys/theme/findByDevice`),
            method: 'post',
            params: this.$http.adornParams({
              'id':this.did
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              console.log('data',data)
              this.list = data.list
            } else {
              this.list = []
            }
            this.dataListLoading = false
          })
        },
        jianbo(publishId,programId){
          // /sys/publishdevicetheme/subPlay'
          console.log('publishId',publishId)
          console.log('programId',programId)
          this.$confirm(`确定对减播吗？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl(`/sys/publishdevicetheme/subPlay`),
              method: 'post',
              params: this.$http.adornParams({
                'did':this.did,
                'pid':publishId,
                'tid':programId
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.getInfo()
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }).catch(() => {})
        }
        // view (id) {
        //   window.open('/#/view?type=theme&id=' + id)
        // }
      }
    }
</script>

<style scoped>
  .active{
    color: red!important;
  }
</style>
